<div class="flex flex-col group">
  <div class="pac-sub-toolbar flex justify-between item-center p-2 bg-components-card-bg sticky top-0 z-10" displayDensity="compact">
    <span>
      {{ 'PAC.MENU.DIMENSIONS' | translate: {Default: "Dimensions"} }}
    </span>

    <ngm-search [(ngModel)]="search" class="flex-1 ml-4" />

    @if (modelType() !== MODEL_TYPE.XMLA) {
      <button mat-icon-button displayDensity="cosy" class="ngm-toolbar__action opacity-10 group-hover:opacity-100"
        [matTooltip]=" 'PAC.MODEL.ENTITY.NewDimension' | translate: {Default: 'New Dimension'} "
        (click)="$event.stopPropagation();$event.preventDefault();addNewItem({}, null);">
        <mat-icon>add</mat-icon>
      </button>
    }
  </div>

  <div cdkDropList id="list-dimensions" class="pac-cdk-drop__list flex-1 flex flex-col min-h-[60px]"
    [cdkDropListEnterPredicate]="dropDimensionPredicate"
    (cdkDropListDropped)="dropDimension($event)"
    >
    <div class="flex-1 flex flex-col overflow-auto">
      @for (item of dimensionUsages$ | async; track item.usage.name) {
        <pac-usage-dimension displayDensity="compact"
          [dimension]="item.dimension"
          [usage]="item.usage"
          (delete)="onDelete($event)"
          (toDimension)="toDimensionUsage(item.usage)"
        />
      }

      @for (dim of dimensions(); track dim.name) {
        <pac-inline-dimension displayDensity="compact"
          [dimension]="dim"
          [readonly]="modelType() === MODEL_TYPE.XMLA"
          (delete)="onDelete($event)"
          (newItem)="addNewItem($event)"
        />
      }
    </div>
  </div>
</div>

<div class="flex flex-col mt-4 group">
  <div class="pac-sub-toolbar flex justify-between item-center p-2 bg-components-card-bg sticky top-0 z-10" displayDensity="compact">
    <span>
      {{ 'PAC.MENU.MEASURES' | translate: {Default: "Measures"} }}
    </span>

    @if (modelType() !== MODEL_TYPE.XMLA && editable()) {
      <button mat-icon-button displayDensity="cosy" class="ngm-toolbar__action opacity-10 group-hover:opacity-100"
        [matTooltip]=" 'PAC.MODEL.ENTITY.NewMeasure' | translate: {Default: 'New Measure'} "
        (click)="$event.stopPropagation();$event.preventDefault();onAddMeasure($event)">
        <mat-icon>add</mat-icon>
      </button>
    }
  </div>
        
  <div class="pac-cdk-drop__list flex-1 flex flex-col min-h-[60px]"
    id="list-measures"
    cdkDropList
    [cdkDropListData]="measures()"
    [cdkDropListEnterPredicate]="measureEnterPredicate"
    (cdkDropListDropped)="dropMeasure($event)"
  >
    <mat-list disableRipple displayDensity="compact" class="ngm-list-base flex-1 flex flex-col overflow-auto">
      @for (member of measures(); track member.__id__) {
        <mat-list-item cdkDragBoundary=".pac-model-entity" cdkDrag [cdkDragData]="member"
          class="ngm-list-item"
          [class.selected]="isSelected(ModelDesignerType.measure, member.__id__)"
          (click)="onSelect(ModelDesignerType.measure, member)"
          (mouseenter)="actionStrip.show()"
          (mouseleave)="actionStrip.hide()"
        >
          <div class="w-full flex items-center">
            <ngm-entity-property class="flex-1" [property]="member" [role]="AGGREGATION_ROLE.measure"/>
            
            <ngm-action-strip #actionStrip [hidden]="true">
              <button *ngIf="!member.rt" mat-icon-button color="warn" displayDensity="cosy" (click)="onDeleteMeasure($event, member)">
                <mat-icon>delete</mat-icon>
              </button>
            </ngm-action-strip>
          </div>

          <div class="pac-cdk-drop__placeholder" *cdkDragPlaceholder></div>

        </mat-list-item>
      }
    </mat-list>
  </div>
</div>

<div class="flex flex-col mt-4 group">
  <div class="pac-sub-toolbar flex justify-between item-center p-2 bg-components-card-bg sticky top-0 z-10" displayDensity="compact">
    <span>
      {{ 'PAC.MENU.CALCULATED_MEMBERS' | translate: {Default: "Calculated Members"} }}
    </span>

    <span class="flex-1"></span>

    <button mat-icon-button [matTooltip]=" 'Copilot.GenerateWithAI' | translate: {Default: 'Generate with AI'} "
      (click)="aiCalculated()">
      <mat-icon fontSet="material-icons-outlined">auto_fix_high</mat-icon>
    </button>
    <button mat-icon-button displayDensity="cosy" class="ngm-toolbar__action opacity-10 group-hover:opacity-100"
      [matTooltip]=" 'PAC.MODEL.ENTITY.NewCalculatedMember' | translate: {Default: 'New Calculated Member'} "
      (click)="$event.stopPropagation();$event.preventDefault();onAddCalculatedMember($event)">
      <mat-icon>add</mat-icon>
    </button>
  </div>
        
  <div id="list-calculated-members" class="pac-cdk-drop__list flex-1 flex flex-col min-h-[60px]"
    cdkDropList
    [cdkDropListData]="calculatedMembers()"
    [cdkDropListEnterPredicate]="calculatedEnterPredicate"
    (cdkDropListDropped)="dropCalcMembers($event)">
    <mat-list disableRipple displayDensity="compact" class="ngm-list-base flex-1 flex flex-col overflow-auto">
      <mat-list-item *ngFor="let member of calculatedMembers()" class="ngm-list-item"
        [class.bg-orange-100]="!member.name"
        [class.selected]="isSelected(ModelDesignerType.calculatedMember, member.__id__)"
        (click)="onSelect(ModelDesignerType.calculatedMember, member)"
        (mouseenter)="actionStrip.show()"
        (mouseleave)="actionStrip.hide()"
        cdkDrag
        [cdkDragData]="member"
      >
        <div class="w-full flex items-center">
          <ngm-entity-property class="flex-1" [property]="$any(member)">
          </ngm-entity-property>

          <ngm-action-strip #actionStrip [hidden]="true">
            <button mat-icon-button displayDensity="cosy"
              (click)="$event.stopPropagation();$event.preventDefault();onCalculatedMemberEdit(member)" >
              <mat-icon>edit</mat-icon>
            </button>
            <button mat-icon-button color="warn" displayDensity="cosy" (click)="onDeleteCalculatedMember($event, member)">
              <mat-icon>delete</mat-icon>
            </button>
          </ngm-action-strip>
        </div>

        <div class="pac-cdk-drop__placeholder" *cdkDragPlaceholder></div>
      </mat-list-item>
    </mat-list>
  </div>
</div>

@if (variables()?.length) {
  <div class="flex flex-col my-4">
    <div class="pac-sub-toolbar flex justify-between item-center p-2 bg-components-card-bg sticky top-0 z-10" displayDensity="compact">
      <span>
        {{ 'PAC.MODEL.Variables' | translate: {Default: "Variables"} }}
      </span>

      <span class="flex-1"></span>
    </div>
          
    <div class="pac-cdk-drop__list flex-1 flex flex-col min-h-[60px]">
      <ul>
        @for (variable of variables(); track variable.__id__) {
          <li class="group relative p-1.5 rounded-md text-sm hover:bg-gray-50"
            [class.bg-orange-100]="!variable.name"
            [class.selected]="isSelected(ModelDesignerType.calculatedMember, variable.__id__)"
          >
            <ngm-entity-property class="flex-1" [property]="$any(variable)"/>

            <div class="hidden group-hover:flex items-center gap-0.5 absolute right-1 top-1">
              <button type="button" class="btn btn-small p-0 w-7 h-7 justify-center"
              (click)="openVariableAttributes(variable)"
              >
                <i class="ri-edit-line"></i>
              </button>

              <button type="button" class="btn btn-small danger p-0 w-7 h-7 justify-center"
                (click)="onDeleteVariable($event, variable)"
              >
                <i class="ri-delete-bin-4-line"></i>
              </button>
            </div>
          </li>
        }
      </ul>
    </div>
  </div>
}